<template>
  <div class="cup">
    <div class="boxs">
      <h2>房间</h2>
      <div>
        <span>
          <img src="../../assets/img/room/yb1.png" alt="" />
        </span>
        <span class="popup">
          <img src="../../assets/img/room/yb2.png" alt="" />
        </span>
      </div>
    </div>
    <div class="nav-list">
      <li>好友</li>
      <li>
        <router-link to="Room">推荐</router-link>
      </li>
      <li>交友</li>
      <li>桌游</li>
      <li>音乐</li>
    </div>
    <div class="td-big">
      <img src="../../assets/img/room/qiu.png" alt="">
    </div>
    <h3 class="hh">暂无好友在玩，添加一些新朋友吧</h3>
    <button>查看推荐好友</button>
  </div>
</template>

<script>
export default {
  methods: {
    hao() {},
  },
};
</script>

<style lang="scss">
.cup {
  .boxs {
    width: 90%;
    height: 54px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 41px;
    display: flex;
    justify-content: space-between;
    h2 {
      line-height: 54px;
      font-size: 44px;
    }
    div {
      display: flex;
      align-items: center;
      vertical-align: middle;
      .popup {
        background-color: black;
      }
      span {
        display: inline-block;
        width: 33px;
        height: 33px;
        margin: 0 10px;
        img {
          vertical-align: middle;
          width: 33px;
          height: 33px;
        }
      }
    }
  }
  color: white;
  margin: 0 auto;
  .nav-list {
    width: 90%;
    margin: 0 auto;
    li {
      float: left;
      height: 55px;
      color: #6666;
      font-size: 32px;
      margin: 0 10px;
      border-bottom: 2px solid #cecece;
      border: none;
    }
    li a {
      color: #666666;
    }
  }
  .td-big {
    width: 451px;
    height: 323px;
    margin: 0 auto;
    margin-top: 180px;
    background-color: #efefef;
    img{
    width: 451px;
    height: 323px;  
    }
  }
  .hh {
    font-size: 24px;
    text-align: center;
    font-weight: normal;
    margin-top: 50px;
    font-weight: 400;
    color: #525252;
  }
  button {
    margin-left: 220px;
    margin-top: 50px;
    font-size: 24px;
    text-align: center;
    width: 332px;
    height: 88px;
    font-size: 28px;
    border-radius: 42px;
    background-color: #2D2D2D;
    color: #FFFFFF;
  }
}
</style>